<template>
	<view class="store-join">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<uni-steps class="steps" :options="stepsData" :active="step"></uni-steps>

		<!-- 账户信息 -->
		<account-info v-if="step===0" :formData="formData" :earnestData="earnestData" @change-step="changeStep"
			@update:formData="formData = $event"></account-info>

		<!-- 门店信息 -->
		<store-info v-if="step===1" :formData="formData" @change-step="changeStep" @update:formData="formData = $event"
			:backStep="0" :nextStep="2"></store-info>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '门店管理',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		step: 0,
		stepsData: [{
			title: '账户信息'
		}, {
			title: '门店信息'
		}],
		formData: {
			id: 0,
			merchant_id: 0,
			store_id: 0,
			audit_opinion: '',
			checked: false,
			opt_type: 'modify', // 操作类型，modify修改，improve完善，add新增

			base_info: {
				merchant_type: '2', // 商户类型
				merchant_short_name: '', // 商户简称
				user_type: '1', // 店铺类型
				contact_name: "", // 联系人
				contact_phone: "", // 手机号
				email: '', // 邮箱
				store_name: "", // 店铺名称
				category_id: 0,//商户分类ID
				unity_category_id: 0,//行业类目ID
				remark: '',//备注
			},

			// 店铺地址信息
			address_info: {
				province_code: "0", // M商户所在省
				city_code: "0", // M 商户所在市
				area_code: "0", // M 商户所在区
				store_area_str: "", // 显示选择地名
				street_address: "", // M 商户详细地址
				longitude: "0.000000", // M 门店地址经度
				latitude: "0.000000", //M 门店地址纬度
			},

			// 门店信息
			shop_info: {
				store_logo: '',//Logo
				store_front_photo: "", // M 门头照 
				store_cash_photo: "", // M 收银台照片 
				store_env_photo: "", //M 经营场所内设照片
				delivery_distance: 10, // 配送距离
				business_hours_start: "09:00", // 开始营业时间
				business_hours_end: "18:00", // 结束营业时间
				business_status: 0, // 营业状态
				business_week: '1,2,3,4,5,6,7',//营业日
			},
		},
		earnestData: {
			earnest_switch: true,
			earnest_money: 0,
			earnest_money_desc: ''
		},
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('type')) {
			state.formData.opt_type = opt.type;
		}
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
			state.formData.id = opt.id;
			getStoreInfo();
		}
		getEarnestMoney();
		getMerchantInfo();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getStoreInfo() {
		request.get('store.store/info', {
			store_id: state.formData.id
		}).then(res => {
			console.log('门店信息', res);
			if (res.code == 1) {
				state.formData = res.data;
				state.formData.base_info.user_type = res.data.base_info.user_type + '';
			}
		});
	}

	// 获取保证金
	function getEarnestMoney() {
		request.get("merchant.merchant/getEarnestMoney", {})
			.then(res => {
				state.earnestData.earnest_money = Number(res.data.guarantee_money).toFixed(2) + '元';
				state.earnestData.earnest_switch = res.data.guarantee_switch === '1' ? true : false;
				state.earnestData.earnest_money_desc = res.data.earnest_money_desc;
			})
	}

	function getMerchantInfo() {
		request.get('merchant.merchant/info', {}).then(res => {
			console.log('商户信息', res);
			if (res.code == 1) {
				state.formData.base_info.user_type = res.data.base_info.user_type;
				state.formData.merchant_id = res.data.id;
			}
		});
	}

	// 接收下一步
	const changeStep = (step) => {
		console.log('接收下一步', step);
		// 保存历史
		//savaHitory();

		state.step = step; // 下一步

		// 提交服务器
		if (state.step == 2) {
			state.step = 1;
			console.log('提交服务器', state.formData);
			apply();
		}
	}

	function apply() {
		console.log('提交表单', state.formData);
		let url = 'store.store/add';
		if (state.formData.id) {
			url = 'store.store/save';
		}
		console.log(url);
		request.post(url, state.formData)
			.then(res => {
				util.showTip(res.msg);
				if (res.code == 1) {
					setTimeout(() => {
						pageRoute(`/merchantPages/store-join/store-list`);
					}, 800);
				}
			})
			.catch(err => {
				uni.showToast({
					title: err.msg,
					icon: 'error',
					mask: true,
				})
			})
	}

	// 保存历史
	function savaHitory() {
		let str = JSON.stringify(state.formData);
		uni.setStorageSync("fubeiShop", str);
	}

	// 获取历史
	function getHitory() {
		let str = uni.getStorageSync('fubeiShop');
		const opId = state.formData.id
		if (str) {
			let arr = JSON.parse(str);

			state.formData = arr;
		}
		if (opId == 0) {
			state.formData.id = 0
		}
		console.log(state.formData)
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		step,
		stepsData,
		formData,
		earnestData,
	} = toRefs(state);
</script>

<style lang="scss">
	.store-join {
		padding: 24rpx;

		.steps {
			padding: 24rpx 0;
			background-color: #fff;
			border-radius: 16rpx;
		}
	}
</style>